<!--
 * @Author: 春天被折进纸里 3301231308@qq.com
 * @Date: 2024-03-08 09:01:21
 * @LastEditors: 春天被折进纸里 3301231308@qq.com
 * @LastEditTime: 2024-04-01 10:51:15
 * @FilePath: \visual-large-screen\src\views\Home.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="container">
    <dv-loading class="loading-wrapper" v-if="loading">
      <div color-white>Loading...</div>
    </dv-loading>
    <Header></Header>
    <LeftPanel></LeftPanel>
    <RightPanel></RightPanel>
    <div id="my-map" class="my-map"></div>
  </div>
</template>

<script setup>
import Header from "../components/Header.vue";
import LeftPanel from "../components/LeftPanel.vue";
import RightPanel from "../components/RightPanel.vue";
import { ref, onMounted } from "vue";
import MyMap from "@/utils/MyMap.js";
import { useMapStore } from "@/store/index";
const mapStore = useMapStore();
const loading = ref(true);
onMounted(() => {
  setTimeout(() => {
    loading.value = false;
    mapStore.myMap = new MyMap("my-map");
  }, 1000);
});
</script>

<style lang="scss" scoped>
.container {
  width: 100vw;
  height: 100vh;
  background-color: #000;
  .loading-wrapper {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1000;
    background-color: #000;
  }
  .my-map {
    width: 100%;
    height: 100%;
  }
  ::v-deep(.amap-logo) {
    display: none !important;
  }
  ::v-deep(.amap-copyright) {
    display: none !important;
  }
}
</style>
